import React from "react";
import ListItem from "@material-ui/core/ListItem/ListItem";

import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { Typography } from "@material-ui/core";

export interface PortfolioItemProps {
  walletName: string;
  transactionValue: string | number;
  isDeposit: boolean;
}

const PortfolioItem: React.SFC<PortfolioItemProps> = (props) => {
  const { walletName, transactionValue, isDeposit } = props;
  const paypalIcon = require("./../../../assets/images/Portfolio/PayPal.svg");
  return (
    <>
      <ListItem className="d-flex justify-content-between align-items-center py-3 portfolio-item">
        <div className="d-flex align-items-center mr-4">
          <img src={paypalIcon} alt="paypal icon" />

          <Typography
            color="textPrimary"
            className="font-weight-bold m-2 account-icon"
          >
            {walletName}{" "}
          </Typography>
        </div>
        <Typography
          color="textPrimary"
          className="font-weight-bold font-size-lg transaction-value "
        >
          {transactionValue} $
        </Typography>

        {!isDeposit ? (
          <div className="font-size-md text-danger toggle-btn">
            Widthdraw <ArrowDropDownIcon />
          </div>
        ) : (
          <div className="font-size-lg text-success toggle-btn">
            Deposit <ArrowDropUpIcon />
          </div>
        )}
      </ListItem>
    </>
  );
};

export default PortfolioItem;
